<template> 
	<div class="app-container">
		<el-card class="operate-container" shadow="never">
			<i class="el-icon-tickets"></i>
			<span>发货列表</span>
		</el-card>
		<div class="table-container">
			<el-table ref="deliverOrderTable" style="width: 100%;" :data="list" border>
				<el-table-column label="订单编号" width="180" align="center">
					<template slot-scope="scope">{{scope.row.orderSn}}</template>
				</el-table-column>
				<el-table-column label="收货人" width="180" align="center">
					<template slot-scope="scope">{{scope.row.receiverName}}</template>
				</el-table-column>
				<el-table-column label="手机号码" width="160" align="center">
					<template slot-scope="scope">{{scope.row.receiverPhone}}</template>
				</el-table-column>
				<el-table-column label="邮政编码" width="160" align="center">
					<template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
				</el-table-column>
				<el-table-column label="收货地址" align="center">
					<template slot-scope="scope">{{scope.row.address}}</template>
				</el-table-column>
				<el-table-column label="配送方式" width="160" align="center">
					<template slot-scope="scope">
						<el-select placeholder="请选择物流公司" v-model="scope.row.deliveryCompany" size="small" @change="updateNo">
							<el-option v-for="(item,index) in companyOptions" :key="index" :label="item.com" :value="item.no" >
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="物流单号" width="180" align="center">
					<template slot-scope="scope">
						<el-input size="small" v-model="scope.row.deliverySn"></el-input>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 15px;text-align: center" >
				<el-button @click="cancel">取消</el-button>
				<el-button @click="confirm" type="primary">确定</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		deliveryOrder,
		juheCom
	} from '@/api/order'
	export default {
		name: 'deliverOrderList',
		data() {
			return {
				list: [],
				companyOptions: [],
				no:''
			}
		},
		created() {
			this.list = this.$route.query.list;
			juheCom().then(res => {
				console.log(res)
				this.companyOptions = res.data
			})
		},
		methods: {
			updateNo(e){
				console.log(e)
				this.no = e;
			},
			cancel() {
				this.$router.back();
			},
			confirm() {
				let key = 'deliveryCode';
				let value = this.no;
				this.list[0][key] = value;
				
				this.$confirm('是否要进行发货操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deliveryOrder(this.list).then(response => {
						console.log('提交参数', this.list)
						this.$router.back();
						this.$message({
							type: 'success',
							message: '发货成功!'
						});
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消发货'
					});
				});
			}
		}
	}
</script>
<style></style>
